<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>

    body{
        background-color: gray;
    }

    td{
        width: 65px;
        text-align: center;
    }
</style>

<body>


<table align="center" border="1" cellspacing="0" cellpadding="0" style="margin-top: 100px">
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年限</th>
        <th>岗位</th>
        <th>薪资</th>
    </tr>

    <tbody id="data">

{#    {% for i in data.data %}#}
{#    <tr>#}
{#        <td>{{ i.id }}</td>#}
{#        <td>{{ i.name }}</td>#}
{#        <td>{{ i.age }}</td>#}
{#        <td>{{ i.gw }}</td>#}
{#        <td>{{ i.xz }}</td>#}
{#    </tr>#}
{#    {% endfor %}#}

    </tbody>


</table>

<script src="http://www.ccmsy.com/static/js/jquery-1.8.3.min.js"></script>

<script>
    loaddata();

    function loaddata() {
        $.ajax({
            url:'/api',
            type:"GET",
            dataType: 'json',

        })
        .done(function (res) {
            //  表示ajax 响应成功
            console.log(res.data.data)

            res.data.data.forEach(function (info) {

                     let content = `
                <tr>
                    <td>${ info.id }</td>
                    <td>${ info.name }</td>
                    <td>${ info.age }</td>
                    <td>${ info.gw }</td>
                    <td>${ info.xz }</td>
                  </tr>
                             `
                $('#data').append(content)
            })


        })

    }


</script>


</body>
</html>